<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="数据规则处理" :width="600">
    <!-- 表单配置：禁用默认按钮，明确表单类型 -->
    <BasicForm :model="formData" :schema="schema" @register="registerForm" :showActionButtonGroup="false" :submitOnReset="false" />

    <!-- 弹窗底部按钮 -->
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';

  const formData = ref({
    protocol: '', // 协议字段
    // 其他需要的字段
  });

  // 表单配置：注册表单实例，不配置默认按钮
  const [registerForm, { validateFields, setFieldsValue }] = useForm({
    model: formData,
    schema,
    labelWidth: 120,
  });

  const [registerModal, { setModalProps }] = useModal();

  // 接收父组件传入的记录
  const setRecord = async (record) => {
    await nextTick();
    // 回显数据（如果需要）
    setFieldsValue({
      ...record,
      protocol: record.protocol || '', // 确保协议字段初始化
    });
  };

  // 确定按钮逻辑
  const handleOk = async () => {
    const values = await validateFields();
    console.log('提交的数据：', values); // 包含协议选择的值
    // 调用处理接口...
    setModalProps({ visible: false });
    emits('success');
  };

  // 取消按钮逻辑
  const handleCancel = () => {
    setModalProps({ visible: false });
  };

  const emits = defineEmits(['success']);
  defineExpose({ setRecord });
</script>
